import React from 'react';
import ReactDOM from 'react-dom';


var data = [
  {
    src:require('../../img/3.jpg'),
    alt:'lalaal'
  },
  {
    src:require('../../img/2.jpg'),
    alt:'lalaal'
  },
  {
    src:require('../../img/3.jpg'),
    alt:'lalaal'
  }
]

/**
*@cfg {Boolean} autoPlay 自动滚动 
*@param {Array} items 图片信息
*/


export default class Banner extends React.Component{
  constructor(props){
  	super(props);
  	this.state = {
      nowLocal:0
  	}
  }
  /**
  *@method 图片滚动方法
  */

  turn(n){
    var _n = this.state.nowLocal + n;
    var _len = this.props.items.length;
    _n = _n >= _len?(_n - _len) :_n; 
    console.log(_n);
    this.setState({nowLocal:_n});
  }

  /**
  *@method 自动滚动方法
  */

  goPlay(){
    if(this.props.autoplay){
      setInterval(() => {
        this.turn(1);
      }, 3000);
    }
  }

  /**
  *@event Dot点击控制滚动
  */

  handleDotClick(i) {
    var option = i - this.state.nowLocal;
    this.turn(option);
  }

  componentDidMount(){
    this.goPlay();
  }

  render(){
    let count = this.props.items.length;

    let width = 100 / count + '%';

    let itemNodes = this.props.items.map((item,index)=>{
      return (
        <li key={'item'+index} className="slider-item" style={{width:width}}>
          <img src={item.src} style={{width:'100%'}} />
        </li>
      )
    })
    let dotNodes = this.props.items.map((item,index)=>{
      return(
        <span key = {'dot'+index}
          className = {"slider-dot" + (index === this.state.nowLocal?" slider-dot-selected":"")}
          onClick={this.handleDotClick.bind(this, index)}>
        </span>
      )
    })
    return (
      <div className='slider'>
      	<ul style={{
          left:-100 * this.state.nowLocal + '%',
          width: this.props.items.length * 100 + "%"
        }}>
      		{itemNodes}
      	</ul>
        <div className='slider-dots-wrap'>
          {dotNodes}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Banner autoplay={true} items = {data} />,document.getElementById('content'));